<template>
	<el-tabs v-model="editableTabsValue" type="card" editable class="demo-tabs" @edit="handleTabsEdit">
		<el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
			<component :is="item.componentId"></component>
		</el-tab-pane>
	</el-tabs>
</template>

<script lang="ts" setup>
	import { defineAsyncComponent, ref, watch } from 'vue'
	import type { TabPaneName } from 'element-plus'
	import router from '../common/router'

	const components = ref([
		import('./UserSelect.vue'),
		import('./OutdocIssue.vue')

	])

	let tabIndex = 1
	const editableTabsValue = ref('1')
	const editableTabs = ref([
		{
			title: '首页',
			name: '/',
			componentId: defineAsyncComponent(() =>
				import('./Home.vue')
			)
		}
	])

	const handleTabsEdit = (
		targetName : TabPaneName | undefined,
		action : 'remove' | 'add'
	) => {
		if (action === 'add') {
			const newTabName = `${++tabIndex}`
			editableTabs.value.push({
				title: 'New Tab',
				name: newTabName,
				componentId: defineAsyncComponent(() =>
					import('./UserSelect.vue')
				)
			})
			editableTabsValue.value = newTabName
		} else if (action === 'remove') {
			const tabs = editableTabs.value
			let activeName = editableTabsValue.value
			if (activeName === targetName) {
				tabs.forEach((tab, index) => {
					if (tab.name === targetName) {
						const nextTab = tabs[index + 1] || tabs[index - 1]
						if (nextTab) {
							activeName = nextTab.name
						}
					}
				})
			}

			editableTabsValue.value = activeName
			editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
		}
	}

	watch(() => router, (newVal, oldVal) => {
		console.log('User object changed:', newVal, oldVal);
		const newTabName = newVal.currentRoute.value.path
		var flag = false
		// 当前页面菜单已打开
		for (let i = 0; i < editableTabs.value.length; i++) {
			if (newTabName == editableTabs.value[i].name) {
				editableTabsValue.value = editableTabs.value[i].name;
				flag = true;
				break;
			}
		}

		if (!flag) {
			var comIndexI = 0;
			var comIndexJ = 0;
			for (var i = 0; i < newVal.options.routes.length; i++) {
				var children = newVal.options.routes[i].children
				for (var j = 0; j < children.length; j++) {
					var element = children[j].path;
					if (newTabName == element) {
						comIndexI = i;
						comIndexJ = j;
						break
					}
				}
			}

			if (comIndexI == 0 && comIndexJ == 0) {
				editableTabs.value.push({
					title: "用户查询",
					name: newTabName,
					componentId: defineAsyncComponent(() =>
						import('./UserSelect.vue')
					)
				})
			}
			if (comIndexI == 0 && comIndexJ == 1) {
				editableTabs.value.push({
					title: "出库下发",
					name: newTabName,
					componentId: defineAsyncComponent(() =>
						import('./OutdocIssue.vue')
					)
				})
			}

			if (comIndexI == 1 && comIndexJ == 0) {
				editableTabs.value.push({
					title: "日志",
					name: newTabName,
					componentId: defineAsyncComponent(() =>
						import('./Log.vue')
					)
				})
			}

			editableTabsValue.value = newTabName



		}

	},
		{ deep: true } // 启用深度监听
	)
</script>

<style>
	.demo-tabs>.el-tabs__content {
		padding: 32px;
		color: #6b778c;
		font-size: 32px;
		font-weight: 600;
	}
</style>